<template>
	<div class="lm-chatgpt-item" :class='{"is-lm": item.isLm}'>
		<chatgpt-item-header :text="'正在为您生成推荐答案：' + item.message.title"></chatgpt-item-header>
		<!-- <chatgpt-item-header text="正在生成推荐话术.."></chatgpt-item-header> -->
		<div class="chatgpt-item-content">
			<div class="ope-bar-wrap">
				<div class="ope-bar">
					<h-tooltip content="复制" placement="top">
						<svg-icon iconClass="copy" class="icon copy" @svgEvent="copy"></svg-icon>
					</h-tooltip>
					<span class="divide"></span>
					<h-tooltip content="点赞" placement="top">
						<svg-icon iconClass="like" class="icon"></svg-icon>
					</h-tooltip>
					<span class="divide"></span>
					<h-tooltip content="点踩" placement="top">
						<svg-icon iconClass="stomp" class="icon"></svg-icon>
					</h-tooltip>
					<span class="divide"></span>
					<h-tooltip content="重新回答" placement="top">
						<svg-icon iconClass="regenerate" class="icon" @svgEvent="regenerate"></svg-icon>
					</h-tooltip>
				</div>
			</div>
			<div class="item-section-title">{{item.message.title}}</div>
			<div class="item-section-content" v-html="item.message.content.replace(/\n/g, '<br />')"></div>
			<div class="bottom-ope">
				<span class="btn edit-btn" @click="editMessage">编辑</span>
				<span class="btn send-btn" @click="postMessage">发送</span>
			</div>
		</div>
	</div>
</template>

<script>
import ChatgptItemHeader from './chatgpt-item-header'
import Clipboard from 'clipboard'
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'GeneralTextItem',
	props: {
		item: Object
	},
	components: {
		ChatgptItemHeader
	},
	data() {
		return {
		}
	},
	computed: {
	},
	methods: {
		...mapMutations('lm-chat', ['setClientDialogInput']),
		...mapActions('lm-chat', ['postMsg', 'postGptMsg']),
		// 复制
		copy() {
			let message = this.item.message.content
			let clipboard = new Clipboard ('.copy', {
        text: () => {
          return message
        }
      })
      clipboard.on('success', () => {
				this.$public.message(this, 'success', '复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
				this.$public.message(this, 'error', '复制失败，请手动复制')
        clipboard.destroy()
      })
		},
		// 编辑
		editMessage() {
			this.setClientDialogInput(this.item.message.content)
		},
		// 发送
		postMessage() {
			let inputValue = this.item.message.content
			this.postMsg({
				msg_side: "1",
				aicc_msg_type: "text",
				aicc_msg_content: {
					content: inputValue
				},
			})
		},
		// 重新回答
		regenerate() {
			let params = {
				quote_msg_content: this.item.message.title
			}
			this.postGptMsg(params)
		}
	}
}
</script>

<style lang="scss" scoped>
.lm-chatgpt-item{
	min-width: 316px;
	display: inline-block;
	&.is-lm{
		/deep/ .item-section-title{
			padding-right: 14px;
		}
		.chatgpt-item-content{
			&::before{
				position: absolute;
				content: '大模型';
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 72px;
				height: 23px;
				background-image: linear-gradient(to right, #DEFFE9, #B5FFF9);
				color: #3C5A8D;
				transform: rotate(45deg);
				right: -19px;
				top: 7px;
				font-size: 11px;
			}
		}
	}
	.chatgpt-item-content{
		position: relative;
		overflow: hidden;
		&:hover{
			.ope-bar-wrap{
				display: block;
			}
		}
		.ope-bar-wrap{
			display: none;
			position: absolute;
			top: -29px;
			right: 0;
			padding-bottom: 5px;
			.ope-bar{
				background: #FFFFFF;
				border-radius: 4px;
				padding: 4px 12px;
				line-height: 1;
				.icon{
					width: 14px;
					height: 14px;
				}
				.divide{
					display: inline-block;
					width: 1px;
					height: 14px;
					background: #F2F4F9;
					margin: 0 12px;
					position: relative;
					top: 2px;
				}
			}
		}
		.item-section-content{
			line-height: 18px;
			margin-top: 12px;
		}
		.bottom-ope{
			display: flex;
			justify-content: flex-end;
			color: #4686F2;
			margin-top: 12px;
			.btn{
				cursor: pointer;
				&.send-btn{
					margin-left: 30px;
				}
			}
		}
	}
}
</style>